<template>
  <div>
    <van-nav-bar :title="t('destruction.destructionForm')" left-arrow @click-left="onClickLeft" placeholder fixed />

    <van-cell-group>
      <van-cell v-for="(item, i) in destructionFormList" :key="i">
        <template #title>
          <span class="van-multi-ellipsis--l2" @click="goOperate(item.destroyOrderOverseaId)">{{ item.destroyNo }}</span>
        </template>
        <template #label>
          <span v-if="item.status === 1" style="padding: 5px 10px; border-radius: 5px; background-color: #ecf5ff; color: #409EFF; border: 1px solid #b3d8ff;">{{ '待销毁' }}</span>
          <span v-if="item.status === 2" style="padding: 5px 10px; border-radius: 5px; background-color: #f6f1eb; color: #E6A23C; border: 1px solid #E6A23C;">{{ '部分销毁' }}</span>
        </template>
        <template #right-icon>
          <van-icon name="arrow" />
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { postRequest } from "@/api";
import router from "@/router";

const { t } = useI18n();
const onClickLeft = () => history.back();

interface OrderForm {
  destroyNo: string,
  destroyOrderOverseaId: number,
  status: number,
};
// let destructionFormList: OrderForm[] = [];
let destructionFormList = ref<OrderForm[]>();
const goOperate = (destroyOrderOverseaId) => {
  router.push({
    name: 'operate',
    query: {
      destroyOrderOverseaId
    }
  });
}
onMounted(async () => {
  const res = await postRequest(
      '/destroyOrderOversea/getPageList', { status: 1 }
  )
  destructionFormList.value = res.data?.destroyOrderOverseaDTOList?.filter(item => item?.status !== 3) || []
});
</script>

<style scoped lang="less">
:deep(.van-cell) {
  font-size: 1rem;
}

:deep(.van-nav-bar__title) {
  font-size: 1rem;
  font-weight: 500;
  color: white;
}

:deep(.van-nav-bar__content) {
  background: #1b82d2;
}

:deep(.van-nav-bar .van-icon) {
  color: white;
}
</style>